<template>
  <div>
    <div class="info-lib">
      <div>
        <h3>个人信息</h3>
        <ul>
          <li>
            <span>名 称</span>
            <span>{{ sellerInfo.realName }}</span>
          </li>
          <li>
            <span>账 号</span>
            <span>{{ sellerInfo.telephone }}</span>
          </li>
          <li v-if="sellerInfo.qq">
            <span>QQ 号</span>
            <span>82734449</span>
          </li>
          <li v-if="sellerInfo.wechat">
            <span>微信号</span>
            <span>jindouyun</span>
          </li>
          <li>
            <span>注册码</span>
            <span>{{ sellerInfo.ownerInviteCode }}</span>
          </li>
        </ul>
      </div>
      <div class="count-info">
        <h3>账户信息</h3>
        <ul>
          <li>
            <img src="@/assets/images/money01.png" alt />
            <div>
              <p>
                <span>余额</span>
                <span>￥{{ sellerInfo.moneyCzye }}</span>
              </p>
            </div>
            <div class="btn">
              <el-button type="success" size="mini" @click="CzDia = true">充 值</el-button>
            </div>
          </li>
          <li>
            <img src="@/assets/images/pig.png" alt />
            <div>
              <p>
                <span>我的收益</span>
                <span>￥{{ sellerInfo.increaseTgsy }}</span>
              </p>
              <p>
                <span>累积收益</span>
                <span>￥{{ sellerInfo.moneyTgsy }}</span>
              </p>
            </div>
            <div class="btn">
              <el-button type="danger" size="mini" @click="txDialog = true">提 现</el-button>
            </div>
          </li>
          <li>
            <img src="@/assets/images/crown.png" alt />
            <div>
              <p>
                <span>会员等级</span>
                <span>SVIP {{ sellerInfo.sellerIsvip }}</span>
              </p>
              <p class="youxiao">有效期至 2021-07-30</p>
            </div>
            <div class="btn">
              <el-button type="warning" size="mini" @click="shengjiDialog = true">升级会员</el-button>
            </div>
          </li>
        </ul>
      </div>
      <div>
        <h3>密码修改</h3>
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="mini"
        >
          <el-form-item label="原始密码" prop="oldPass">
            <el-input v-model="ruleForm.oldPass" type="password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="pass">
            <el-input v-model="ruleForm.pass" type="password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="sure('ruleForm')">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 充值的组件 -->
    <cz-dialog :showcz="CzDia" @closeDia="closeFn" />

    <!-- 提现的dialog -->
    <el-dialog
      title="商户提现(首次提现，请先上传收款码)"
      :visible.sync="txDialog"
      width="30%"
      :before-close="handleClose"
    >
      <div class="tx-content">
        <div class="upload-file">
          <el-upload
            action="http://106.53.45.41:9509/qiniu/fileupload?prefix=seller"
            list-type="picture-card"
            :on-success="successPic"
            :auto-upload="false"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
            </div>
          </el-upload>
        </div>
        <div>
          <el-form
            ref="tixianFormRef"
            :model="tixianForm"
            :rules="tixianFormRules"
            class="demo-ruleForm"
            label-width="100px"
          >
            <el-form-item label="收款方式">
              <el-select v-model="tixianForm.style" placeholder="请选择">
                <el-option label="支付宝" selected value="aliapay"></el-option>
                <el-option label="微信" value="wepay"></el-option>
                <el-option label="银联" value="yinlian"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="提现金额" prop="money">
              <el-input v-model="tixianForm.money" placeholder="*请输入转账的订单号" />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="txDialog = false">取 消</el-button>
        <el-button type="primary" @click="txDialog = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 升级 VIP 的界面 -->
    <el-dialog title="提示" :visible.sync="shengjiDialog" width="50%" :before-close="handleClose">
      <div class="vip-content">
        <el-form
          ref="shengjiFormRef"
          :model="shengjiForm"
          class="demo-ruleForm"
          label-width="120px"
        >
          <el-form-item label="VIP级别">
            <div>
              <el-radio v-model="shengjiForm.level" label="1">vip（￥99/30天）</el-radio>
              <el-radio v-model="shengjiForm.level" label="2">svip（￥399/30天）</el-radio>
              <el-radio v-model="shengjiForm.level" label="3">spvip（￥699/30天）</el-radio>
            </div>
          </el-form-item>
          <el-form-item label="购买数量">
            <div>
              <el-input-number v-model="shengjiForm.num" :min="1" :max="10"></el-input-number>
              <p>合计费用 {{ shengjiForm.num }}</p>
            </div>
          </el-form-item>
          <el-form-item label="会员有效期">
            <div>
              <p>2020-8-9至2020-9-8</p>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="shengjiDialog = false">取 消</el-button>
        <el-button type="primary" @click="shengjiDialog = false">确 定 升 级</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CzDialog from './dialog.vue'

export default {
  components: {
    CzDialog
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        oldPass: '',
        pass: '',
        checkPass: ''
      },
      rules: {
        oldPass: [{ validator: validatePass, trigger: 'blur' }],
        pass: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }]
      },
      sellerInfo: {},
      CzDia: false,
      txDialog: false,
      shengjiDialog: false,
      tixianForm: {
        style: 'alipay',
        money: 0
      },
      tixianFormRules: {
        money: [{ required: true, message: '请输入提现金额', trigger: 'blur' }]
      },
      shengjiForm: {
        level: '',
        num: 0
      }
    }
  },
  created() {
    this.getSellerInfo()
  },
  methods: {
    async getSellerInfo() {
      const { data } = await this._axios.get(`/seller/findsellerandaccountinfo
`)
      console.log(data)
      this.sellerInfo = data
    },
    sure(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) {
          this.$message({
            message: '验证不通过',
            type: 'error'
          })
        }
        const { data } = await this._axios.get(`/seller/restpwd`, {
          params: {
            oldPwd: this.ruleForm.oldPass,
            newPwd: this.ruleForm.pass
          }
        })
        if (data.code !== 'ok') {
          this.$message({
            message: data.message,
            type: 'error'
          })
          return
        }
        this.$message({
          message: data.message,
          type: 'success'
        })
        this.$refs[formName].resetFields()
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    closeFn(bool) {
      this.CzDia = bool
    },
    handleClose() {
      this.txDialog = false
      this.shengjiDialog = false
    },
    successPic(res) {}
  }
}
</script>

<style lang="scss" scoped>
.info-lib {
  display: flex;

  div {
    flex: 3.3333;
  }
}

h3 {
  height: 32px;
  line-height: 32px;
  background-color: #1890ff;
  text-indent: 5em;
  color: #fff;
}

.info-lib {
  div:nth-of-type(1) {
    ul {
      margin-top: 20px;
      li {
        padding-left: 20px;
        display: flex;
        line-height: 26px;
        span:nth-of-type(1) {
          width: 80px;
          text-align: right;
          margin-right: 20px;
          font-weight: 700;
        }
      }
    }
  }
}

.count-info {
  ul {
    padding-top: 20px;
  }
  li {
    display: flex;
    img {
      width: 40px;
      height: 40px;
    }
    > div {
      width: 150px !important;
    }
    p {
      width: 150px !important;
      font-size: 14px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      display: flex;
      span:nth-of-type(1) {
        width: 80px;
        text-align: right;
        margin-right: 20px;
      }
      span:nth-of-type(2) {
        color: #e92322;
      }
    }
    .btn {
      text-align: center;
      .el-button {
        margin-top: 4px;
      }
    }
  }

  .youxiao {
    float: right;
    margin-right: 20px;
  }
}

.el-form {
  padding-top: 20px;
}

.el-form-item {
  width: 280px;
  margin: 20px 0;
}
.tx-content {
  display: flex;
}

.vip-content {
  .el-form {
    padding: 0;
  }
  .el-form-item {
    &:nth-of-type(1) {
      div {
        display: flex;
        padding-top: 10px;
      }
    }
    &:nth-of-type(2) {
      div {
        width: 400px;
        display: flex;
        .el-input-number {
          width: 110px;
        }
        p {
          width: 120px;
          margin-left: 20px;
        }
      }
    }
  }
}
</style>
